<template>
  <div>
    <div id="bottom_bar" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onUnmounted, onMounted } from "vue";

function initChart() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("bottom_bar"));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: "服务包使用情况",
    },
    color: "#2984F8",
    tooltip: {},
    legend: {
      data: ["销量"],
    },
    xAxis: {
      data: [
        "老年人护理包",
        "基础包1",
        "基础包2",
        "基础包3",
        "基础包4",
        "儿童护理包",
        "高级特需包",
      ],
    },
    yAxis: {},
    series: [
      {
        // name: "销量",
        type: "bar",
        data: [340, 252, 230, 140, 230, 50, 90],
        barWidth: 20, //柱图宽度
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  myChart.resize();
  window.onresize = function () {
    console.log("窗口尺寸发生变化");
    //自适应大小
    myChart.resize();
  };
}

onMounted(() => {
  setTimeout(() => {
    initChart();
  }, 0);
});

onUnmounted(() => {
  echarts.dispose;
});
</script>

<style lang="scss" scoped>
</style>